<template>
  <el-dialog
    title="查阅试题"
    append-to-body
    :visible="value"
    @close="btnCancel"
    class="dialog"
    width="65%"
  >
<div v-if='valueShow'>
      <el-table border :data="question">
      <el-table-column label="试题内容" width="1125" align="left">
        <template slot-scope="{ row }">
          <el-row>
            <el-col :span="2"><b>ID:</b>{{ row.id }}</el-col>
            <el-col :span="22"
              ><b>题干信息:</b
              ><el-link type="primary" @click="toParse(row)" v-html="row.question"></el-link>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5"><b>归属学科:</b>{{ row.subject_name }} </el-col>
            <el-col :span="5"><b>归属目录:</b>{{ row.directory_name }} </el-col>
            <el-col :span="5"
              ><b>标签信息:</b>
              <span v-for="item in row.tag_info" :key="item"
                >{{ item }}&nbsp;</span
              >
            </el-col>
            <el-col :span="4"
              ><b>发布状态:</b>
              <el-tag size="small" v-if="row.show_state == 1" type="success"
                >上架</el-tag
              >
              <el-tag size="small" v-if="row.show_state == 2" type="info"
                >下架</el-tag
              >
            </el-col>
            <el-col :span="5"
              ><b>发布时间:</b>{{ row.created_at | formatTime }}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
          <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope='scope'>
            <!-- 删除：下架就可删除 -->
            <el-button
              type="text"
              icon="el-icon-delete"
              size="small"
              circle
              @click="deleteThis(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
    </el-table>
</div>
<div v-else>
<el-divider>基本信息</el-divider>
    <el-row class="question-row">
      <el-col :span="10"><b>试题编号:</b>{{realValue.quest_num}}</el-col>
      <el-col :span="4"><b>试题类型:</b>{{ realValue.quest_type | showQuestType }} </el-col>
      <el-col :span="5"><b>归属学科:</b>{{ realValue.subject_name }} </el-col>
      <el-col :span="5"><b>归属目录:</b>{{ realValue.directory_name }} </el-col>
      <el-col :span="10"><b>标签信息:</b>
        <span v-for="item in realValue.tag_info"
              :key="item">{{item}}&nbsp;</span>
      </el-col>
      <el-col :span="4"><b>发布状态:</b>
        <el-tag size="small"
                v-if="realValue.show_state==1"
                type="success">上架</el-tag>
        <el-tag size="small"
                v-if="realValue.show_state==2"
                type="info">下架</el-tag>

      </el-col>
      <el-col :span="5"><b>审核人:</b>{{ realValue.check_username || '暂无' }} </el-col>
      <el-col :span="5"><b>审核状态:</b>
        <el-tag size="small"
                v-if="realValue.check_state==1"
                type="warning">待审核</el-tag>
        <el-tag size="small"
                v-if="realValue.check_state==2"
                type="success">通过</el-tag>
        <el-tag size="small"
                v-if="realValue.check_state==3"
                type="info">不通过</el-tag>
      </el-col>
      <el-col :span="10"><b>审核意见:</b>
        {{realValue.check_remarks || '暂无'}}
      </el-col>
      <el-col :span="4"><b>创建人:</b>{{ realValue.create_name }}</el-col>
      <el-col :span="5"><b>难度系数:</b>
        <span v-if="realValue.difficulty==1">简单</span>
        <span v-if="realValue.difficulty==2">中等</span>
        <span v-if="realValue.difficulty==3">较难</span>
      </el-col>
      <el-col :span="5"><b>发布时间:</b>{{ realValue.created_at | formatTime }} </el-col>
    </el-row>
    <el-divider>试题信息</el-divider>
    <el-row class="question-row">
      <el-col class="flex">
        <b>题干信息：</b>
        <el-link :underline="false"
                 type="primary">
          <div v-html="realValue.question"></div>
        </el-link>
      </el-col>
      <el-col class="flex">
        <b>选项信息：</b>
        <!-- 单选/多选/判断 -->
        <div v-if="realValue.quest_type!=4">
          <el-checkbox v-for="(item,index) in toParses(realValue.quest_options)"
                       :checked="item.is_true"
                       :key="index">
            {{item.code}} {{item.content}}
          </el-checkbox>
        </div>
        <!-- 简答 -->
        <div v-html="realValue.quest_answer"
             v-if="realValue.quest_type==4"></div>
      </el-col>
    </el-row>
    <el-divider>答案信息</el-divider>
    <el-row class="question-row">
      <el-col class="flex">
        <b>正确答案：</b>
        <el-link :underline="false"
                 type="primary">
          <div v-html="realValue.quest_answer"></div>
        </el-link>
      </el-col>
    </el-row>
    <el-row class="question-row">
      <el-col class="flex">
        <b>答案解析：</b>
        <el-link v-html="realValue.quest_remark"></el-link>
      </el-col>
    </el-row>
</div>
  </el-dialog>
</template>

<script>
import {deleteQuestion} from "@/api/exam/"
export default {
  name: "QuestionPreview",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    question: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      valueShow: true,
      realValue:null
    }
  },
  methods: {
    toParse(row) {
      this.valueShow=false
      this.realValue=row
    },
     toParses(val) {
      if (!val) return []
      return JSON.parse(val)
    },
    btnCancel(){
      this.$parent.showLook=false,
      this.valueShow=true
    }, 
    // 删除按钮事件
    async deleteThis(val) {
      // 下架 即可删除
      console.log(val);
      if (val.show_state == 2) {
        // 删除操作
        try {
          await this.$confirm("确定删除吗,是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          });
        } catch (e) {
          return this.$message.info("已取消");
        }
        await deleteQuestion(val.id);
        this.$message.success("删除成功");
        // this.get_list();
      } else {
        // 提示
        this.$message.warning("下架情况下才可以删除");
      }
    }
  },
};
</script>

<style scoped lang="scss">
.question-row {
  line-height: 30px;
}
.question-row b {
  color: #999;
  font-weight: normal;
  margin-right: 5px;
}
.question-row .flex {
  display: flex;
}
.question-row .flex b {
  width: 72px;
}
.dialog {
  .el-dialog__body {
    padding-top: 5px;
  }
}
</style>
